<template>
  <div id="user">
    <user-header @handle-search-click-emit="userSearch"></user-header>
    <div class="user-table">
      <user-table
        :table-list="tableList"
        :table-data="tableData"
        :is-site="true"
        @handle-edit-click-emit="HandleEditClick"
      ></user-table>
    </div>
    <div class="user-pagination">
      <user-pagination :total="total"></user-pagination>
    </div>
    <user-box
      :drawer-visibility="drawerVisibility"
      :size="drawerSize"
      :title="drawerTitle"
      :form="form"
      @handle-close-emit="handleClose"
    ></user-box>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from "vue";
import { userPinia } from "@/libs/pinia/user";
import UserHeader from "./cpns/header.vue";
import UserTable from "@/components/page-table/index.vue";
import UserPagination from "@/components/page-pagination/index.vue";
import UserBox from "./cpns/drawer.vue";

import { tableList } from "./user.config";
import { themePinia } from "@/libs/pinia/theme";

const store = userPinia();
const theme = themePinia();

// el-table
const page = reactive({
  username: "",
  current: 1,
  size: 10,
});

let form=reactive({})

store.userListActions(page);
const tableData = computed(() => store.userList);
const total = computed(() => store.totla);
const TableListColor = computed(() => theme.TableListColor);

const userSearch = (username: any) => {
  page.username = username;
  store.userListActions(page);
};

// drawer
const drawerVisibility = ref(false);
const drawerSize = ref("50%");
const drawerTitle = ref("详细信息");

const HandleEditClick = (row:any) => {
  Object.assign(form,row)
  drawerVisibility.value = true;
  console.log(form);
};

const handleClose = () => {
  // 判断是否有值进行关闭
  drawerVisibility.value=false
};


</script>

<style lang="scss" scoped>
#user {
  width: 100%;
}
.user-table {
  display: flex;
  padding: 1.5rem;
  background-color: v-bind(TableListColor);
  margin-top: 1.5rem;
  border-radius: 1rem;
}
.el-table__header {
  border-radius: 1rem;
}
</style>
